<script setup>
import { ref,reactive,computed, withModifiers } from 'vue'
// import{
//   onBeforeMount,
//   onMounted,
//   onBeforeUpdate,
//   onUpdated,
//   onBeforeUnMount,
//   onUnMounted
// } from 'vue'

// console.log('生命周期:setup')
// onBeforeMount(() => {
//   console.log('生命周期:onBeforeMount')
// })
// onMounted(() => {
//   console.log('生命周期:onMounted')
// })
// onBeforeUpdate(() => {
//   console.log('生命周期:onBeforeUpdate')
// })
// onUpdated(() => {
//   console.log('生命周期:onUpdated')
// })
// onBeforeUnMount(() => {
//   console.log('生命周期:onBeforeUnMount')
// })
// onUnMounted(() => {
//   console.log('生命周期:onUnMounted')
// })

const message = ref('hello world!')
const rawHtml = ref('<span style="color:red">span标签中的红色字体</span>')
const url = ref('https://www.bilibili.com')
const num = ref(0)

const myclass = {
    name: 'neiber',
    school: 'qvtu'
}
const myclassReactive = reactive(myclass)
console.log(myclass)
console.log(myclassReactive)
console.log(myclassReactive == myclass)

// console.log(message)
// console.log(message.value)

const chinese = ref(0)
const math = ref(0)
const english = ref(0)

const movieA = reactive({
    name: '哪吒之魔童闹海',
    piaofang: 100,
    shouzhong: '很广',
    juqing: '有趣',
    texiao: '绚丽'
})

const score = ref(0)
const buildings = reactive([
    '一善书院', '双馨书院', '三创书院', '四实书院', '八方书院', '拾德书院'
])

const who = ref('admin')//自定义指令 --> 调整学校人员身份位置

const studentInfos = reactive([
  { id:20250228,name: '新一',live:'善书院',score:90},
  { id:20250229,name: '雪豹',live:'馨馨书院',score:85},
  { id:20250230,name: '丁真',live:'创创创书院',score:61},
  { id:20250231,name: '王源',live:'实实实实书院',score:59},
  { id:20250232,name: '赵四',live:'方方方方方方方方书院',score:60},
  { id:20250233,name: '老八',live:'拾德书院',score:30}
])
const studentInfoKeys = reactive({
  id:'学号',
  name:'姓名',
  live:'宿舍',
  score:'成绩'
})

function hello(){
  // console.log('Hello');
  console.log(message.value)
  message.value = '哈里路大旋风'
  url.value = 'http://www.baidu.com'
}
function add(){
  num.value++
}
function delt(){
  num.value--
}

const movieIsSuccess = computed(() => {
    console.log('=======计算属性被调用了=========')
    return movieA.shouzhong == '很广' && movieA.juqing == '有趣' && movieA.texiao == '绚丽'
        ? '成功的'
        : '一般的'
})

function movieIsSuccessFun() {
    console.log('=======方法被调用了=========')
    return movieA.shouzhong == '很广' && movieA.juqing == '有趣' && movieA.texiao == '绚丽'
        ? '成功的'
        : '一般的'
}

function adjustMovie() {
    movieA.shouzhong = '小朋友'
    movieA.piaofang = 200
}

console.log(movieIsSuccess)
console.log(movieIsSuccess.value)

const computedSum = computed(() => {
    return chinese.value + math.value + english.value
})

const computedAverag = computed(() => {
    return (chinese.value + math.value + english.value) / 3
})

</script>

<template>
<!-- 第一次课 -->
  <h1>{{ message }}</h1>
  <p v-show="false">使用文本插值:{{ rawHtml }}</p>
  <p v-show="true">使用原始HTML:<span v-html="rawHtml"></span></p>
  <button @click="hello()">你好我的盆油</button>

<!-- 第二次课 -->
  <h1>{{ num }}</h1>
  <button @click="add()">扣我加1</button>
  <button @click="delt()">扣我减1</button>

<!-- 第三次课 -->
  <p>
    使用JS表达式：电影{{ movieA.name }}是：{{
            movieA.shouzhong == '很广' && movieA.juqing == '有趣' && movieA.texiao == '绚丽'
                ? '成功的'
                : '一般的'
        }}
  </p>
  <p>使用计算属性：电影{{ movieA.name }}是: {{ movieIsSuccess }}</p>
  <p>使用方法：电影{{ movieA.name }}是：{{ movieIsSuccessFun() }}</p>
  <button @click="adjustMovie()">调整电影</button>
  <h1>票房 {{ movieA.piaofang }}</h1>
  <h1>{{ test }}</h1>
  <input v-model="test">
<!-- 书本P29 2.2 -->
  <p>语文：<input type="number" v-model="chinese"></p>
  <p>数学：<input type="number" v-model="math"></p>
  <p>英语：<input type="number" v-model="english"></p>
  <p>总分：{{ computedSum }}</p>
  <p>平均分：{{ computedAverag }}</p>

<!-- 第四次课 -->
<div>
  <input v-model="score" type="number"/>
  <p v-if="score >= 85"> 优秀 </p>
  <p v-else-if="score >= 70"> 良好 </p>
  <p v-else-if="score >= 60"> 及格 </p>
  <p v-else>不及格</p>
</div>

<div>
  <p v-for="building in buildings">{{ building }}</p>
</div>
<div>
  <p v-for="studentInfos,index in studentInfos" :key="studentInfos.id">
    {{ index+1 }}. {{ studentInfos.name }} 住在 {{ studentInfos.live }}
  </p>
</div>
<div>
  <p v-for="(value,key,index) in movieA">
    {{ index+1 }}. KEY是{{ key }}, VALUE是{{ value }}
  </p>
</div>
<div>
  <input placeholder="请输入人员身份" v-model="who" />
  <table border="1">
    <thead>
      <tr>
        <th v-for="column,key in studentInfoKeys" :key="key">
          {{ column }} ({{ key }})
        </th>
      </tr>
    </thead>
    <tbody>
      <tr  v-for="studentInfo in studentInfos">
        <td v-for="column, key, index in studentInfoKeys" :key="studentInfo.id">
          <span v-if="column == '成绩'">
            <span v-show="studentInfo[key] >= 60">
              及格
            </span>
            <span v-show="studentInfo[key] < 60">
              挂科
            </span>
          </span>
          <span v-else>
            {{ studentInfo[key] }}
          </span>
        </td>
        <td>
          <button v-permission="who">查看</button>
          <button v-permission="who" style="color: blue;">修改</button>
          <button v-permission="who" style="color: red;">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<!-- 第五次课 -->
<div>
  <!-- <h1 v-if="h1Display" v-custom:parameter.click="message"> {{ message }}</h1>
  <button @click="updateEl()">更新</button>
  <button v-focus @click="unmountEl()">销毁</button>
  <div>
    <input placeholder="Without focus" />
    <input v-focus placeholder="With focus" />
  </div> -->
  <input
    v-model="test"
    v-debounce="{ func: newInput, delay: 3000 }" />
  <input placeholder="With limit" v-model="test" v-limit:9 />
</div>
</template>

<style scoped>

</style>
